<template>
	<view class="t-radio-container">
		 <!-- modeType 1 练习模式   0 模拟考试  2 查看试卷 -->
		<template v-if="modeType == '0'">
			<view v-if="items.tqType != 2" class="t-radio-item-wrap bordered" v-for="(item,index) in items.options" :key="index"
				@click="itemClick(index, item.value, items, item, idx)">
				<view class="t-radio-item" :class="checkedIdx===index ? 'checked-item': '' "
					:style="{'border-radius':((iconSize*1.5)*2)+'rpx'}">
					<view
						:class=" checkedIdx === index ? 't-radio-icon iconfont icon-xuanze' : 't-radio-icon iconfont icon-weixuanzhong' ">
					</view>
					<!-- <text class="t-radio-text" >{{item.text}}</text> -->
					<rich-text class="t-radio-text" :nodes="item.text"></rich-text>
				</view>
			</view>
			
			<template v-else>
				<view :class="'t-radio-item-wrap bordered' " v-for="(item,index) in items.options" :key="index"
					@click="itemClick(index, item.value, items, item, idx)">
					<view class="t-radio-item"
						:class="item.checked ? 'checked-item' : ' ' ">
						<view class="t-radio-icon iconfont"
							:class="item.checked ? 'icon-xuanze' : 'icon-weixuanzhong' ">
						</view>
						<rich-text class="t-radio-text" :nodes="item.text">
						</rich-text>
					</view>
				</view>
			</template>
		</template>
			<!-- modeType 1 练习模式 -->
		<template v-if="modeType == '1'">
			<view v-if="items.tqType != 2" :class="'t-radio-item-wrap bordered' " v-for="(item,index) in items.options" :key="index"
				@click="itemClick(index, item.value, items, item, idx)">
				<view class="t-radio-item"
					:class="{ 'checked-item': checkedIdx === index && isActive == item.bzAnswer, 'error-radio-item': checkedIdx === index && isActive != item.bzAnswer }">
					<view class="t-radio-icon iconfont"
						:class="checkedIdx === index && isActive == item.bzAnswer ? 'icon-xuanze' : (checkedIdx === index && isActive != item.bzAnswer ? 'icon-cuowu1' : 'icon-weixuanzhong') ">
					</view>
					<rich-text class="t-radio-text" :nodes="item.text">
					</rich-text>
				</view>
			</view>
			<!-- 多选 -->
			<template v-else>
				<view :class="'t-radio-item-wrap bordered' " v-for="(item,index) in items.options" :key="index"
					@click="itemClick(index, item.value, items, item, idx)">
					<view class="t-radio-item"
						:class="item.checked ? (item.bzAnswer.includes(item.userAnswer) ? 'checked-item' : 'error-radio-item' ): '' ">
						<view class="t-radio-icon iconfont"
							:class="item.checked ? (item.bzAnswer.includes(item.userAnswer) ? 'icon-xuanze' : 'icon-cuowu1' ): 'icon-weixuanzhong' ">
						</view>
						<rich-text class="t-radio-text" :nodes="item.text">
						</rich-text>
					</view>
				</view>
			</template>
		</template>
		<!-- modeType 2 查看试卷 -->
		<template v-if="modeType == '2'">
			<view :class="'t-radio-item-wrap bordered' " v-for="(item,index) in items.options" :key="index"
				@click="itemClick(index, item.value, items, item,idx)">
				<view class="t-radio-item"
					:class="{'checked-item': items.bzAnswer == items.userAnswer && item.value ==  items.bzAnswer, 'error-radio-item' : !items.userAnswer=='' && items.bzAnswer !== items.userAnswer  && item.value ==  items.userAnswer}  ">
					<view class="t-radio-icon iconfont"
						:class="checkedIdx === index && isActive == item.bzAnswer ? 'icon-xuanze' : 'icon-weixuanzhong' ">
					</view>
					<rich-text class="t-radio-text" :nodes="item.text">
					</rich-text>
				</view>
			</view>
		</template>
		<!-- 科目三练习模式 -->
		<template v-if="modeType == '3'">
			<!-- 多选模式 -->
			<template v-if="tqType == '2'">
				<view :class="'t-radio-item-wrap bordered' " v-for="(item,index) in items" :key="index"
					@click="itemClick(index, item.value, items, item, idx)">
					<view class="t-radio-item"
						:class="item.checked ? (item.bzAnswer.includes(item.userAnswer) ? 'checked-item' : 'error-radio-item' ): '' ">
						<view class="t-radio-icon iconfont"
							:class="item.checked ? (item.bzAnswer.includes(item.userAnswer) ? 'icon-xuanze' : 'icon-cuowu1' ): 'icon-weixuanzhong' ">
						</view>
						<span>{{item.value}}、</span>
						<rich-text class="t-radio-text" :nodes="item.texts">
						</rich-text>
					</view>
				</view>
			</template>
			<!-- 单选模式 -->
			<template v-else>
				<view :class="'t-radio-item-wrap bordered' " v-for="(item,index) in items" :key="index"
					@click="itemClick(index, item.value, items, item, idx)">
					<view class="t-radio-item"
						:class="{ 'checked-item': idx === index && item.userAnswer == item.bzAnswer, 'error-radio-item': idx === index && item.userAnswer != item.bzAnswer }">
						<view class="t-radio-icon iconfont"
							:class="idx === index && item.userAnswer == item.bzAnswer ? 'icon-xuanze' : (idx === index && item.userAnswer != item.bzAnswer ? 'icon-cuowu1' : 'icon-weixuanzhong') ">
						</view>
						<!-- {{checkedIdx === index && item.userAnswer == item.bzAnswer}}==={{checkedIdx === index && item.userAnswer != item.bzAnswer}} -->
						<span>{{item.value}}、</span>
						<rich-text class="t-radio-text" :nodes="item.texts">
						</rich-text>
					</view>
				</view>
			</template>
			

		</template>
		<!-- 科目三模拟考试 -->
		<template v-if="modeType == '4'">
			<!-- 多选模式 -->
			<template v-if="tqType == '2'">
				<view :class="'t-radio-item-wrap bordered' " v-for="(item,index) in items" :key="index"
					@click="itemClick(index, item.value, items, item, idx)">
					<view class="t-radio-item"
						:class="item.checked ? 'checked-item' : ' ' ">
						<view class="t-radio-icon iconfont"
							:class="item.checked ? 'icon-xuanze' : 'icon-weixuanzhong' ">
						</view>
						<span>{{item.value}}、</span>
						<rich-text class="t-radio-text" :nodes="item.texts">
						</rich-text>
					</view>
				</view>
			</template>
			
			<template v-else>
			<view :class="'t-radio-item-wrap bordered' " v-for="(item,index) in items" :key="index"
				@click="itemClick(index, item.value, items, item, idx)">
				<view class="t-radio-item" :class="{ 'checked-item': idx === index }">
					<view class="t-radio-icon iconfont" :class="idx === index ? 'icon-xuanze' : 'icon-weixuanzhong' ">
					</view>
					<span>{{item.value}}、</span>
					<rich-text class="t-radio-text" :nodes="item.texts">
					</rich-text>
				</view>
			</view>
			</template>
		</template>
	</view>
</template>

<script>
	export default {
		name: "KevyRadio",
		data() {

			return {}
		},
		props: {
			modeType: {
				type: [String, Number],
				default: 0 // 0 模拟考试， 1 练习错题,  2 查看试卷, 3 练习模式
			},
			tqType: {
				type: [String, Number],
				default: 0 // 2 多选 1 单选  3判断
			}, //每个radio数据
			items: {
				type: Object,
				default: () => {}
			},
			idx: {
				type: [String, Number],
				default: ''
			},
			//字体大小，单位rpx
			fontSize: {
				type: [String, Number],
				default: 30
			},
			//字体颜色
			color: {
				type: String,
				default: '#fff'
			},
			//图标大小
			iconSize: {
				type: [String, Number],
				default: 36
			},
			//图标颜色
			iconColor: {
				type: String,
				default: "#329cfe"
			},
			//下边框
			bordered: {
				type: [Boolean, String],
				default: false
			},
			//默认选中值，仅在第一次生效
			checkIndex: {
				type: Number,
				default: null
			}


		},
		data() {
			return {
				checkedIdx: this.checkIndex,
				isActive: ''
			};
		},

		computed: {

		},

		mounted() {
			// console.log(this.items);
		},
		methods: {
			// 异位判断
			areStringsAnagrams(str1, str2) {
				if (str1 === undefined || str2 === undefined) {  
				    return false;  
				  }
			  // 如果字符串长度不同，直接返回false  
			   if (str1.length !== str2.length) {  
			     return false;  
			   }  
			   
			   // 创建一个对象来统计str1中每个字符的出现次数  
			   const charCount = {};  
			   for (let char of str1) {  
			     charCount[char] = (charCount[char] || 0) + 1;  
			   }  
			   
			   // 遍历str2，减去charCount中对应字符的计数  
			   for (let char of str2) {  
			     if (!charCount[char]) {  
			       // 如果str2中有str1中没有的字符，返回false  
			       return false;  
			     }  
			     charCount[char]--;  
			   }  
			   
			   // 检查charCount对象，确保所有字符的计数都为0  
			   for (let key in charCount) {  
			     if (charCount[key] !== 0) {  
			       return false;  
			     }  
			   }  
			   
			   // 如果所有检查都通过，返回true  
			   return true;  
			},
			//单击事件
			itemClick(index, answer, item, options, idx) {
				// console.log(index, answer, item, options, '=====');
				if (this.modeType == '2') {
					return
				}
				this.checkedIdx = index;
				this.isActive = answer;
				this.$emit('radioClick', {
					index,
					answer,
					item,
					options,
					idx
				});
			},
			//16进制颜色转rgba
			hexToRgba(hex, opacity) {
				if (!hex) hex = '#4fc08d';
				let rgba = 'rgba(' + parseInt('0x' + hex.slice(1, 3)) + ',' +
					parseInt('0x' + hex.slice(3, 5)) + ',' +
					parseInt('0x' + hex.slice(5, 7)) + ',' +
					(opacity || "1") + ')'
				return rgba
			},
		}
	}
</script>

<style lang="scss" scoped>
	.t-radio-container {
		width: 100%;
		box-sizing: border-box;

		.t-radio-item-wrap {
			// display: flex;
			// flex-direction: row;
			// justify-content: flex-start;
			align-items: center;
			padding-bottom: 6rpx;
			padding-top: 6rpx;
			box-sizing: border-box;
			width: 100%;
			flex: 1;

			&.bordered {
				border-bottom: 1rpx solid #e4e4e4;
			}

			.t-radio-item {
				display: flex;
				flex-direction: row;
				justify-content: flex-start;
				align-items: center;
				box-sizing: border-box;
				padding: 10rpx 24rpx 10rpx 12rpx;
				max-width: 100%;

				.t-radio-icon {
					display: flex;
					background-color: #fff;
					border-radius: 50%;
					-webkit-transition: 0.25s ease;
					transition: 0.25s ease;
					margin-right: 14rpx;
					box-sizing: border-box;
				}

				.t-radio-text {
					font-size: 28rpx;
					text-overflow: ellipsis;
					box-sizing: border-box;
					flex: 1;
				}
			}
		}

		.icon-xuanze {
			color: #329cfe;
		}

		.iconfont {
			font-size: 40rpx;
		}

		.checked-item {
			border-radius: 108rpx;
			background-color: rgb(50, 156, 254);
			color: #fff;
			.t-radio-text {
				color: #fff !important
			}
		}

		.error-radio-item {
			border-radius: 108rpx;
			background-color: #f00 !important;
			color: #fff;
			.icon-cuowu1 {
				color: #f00 !important;
			}

			// color:#fff;
			.t-radio-text {
				color: #fff !important
			}
		}
	}
</style>